import { View, Text, Button } from '@tarojs/components'
import './index.less'
import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { orderDetailUrl } from '../../constans'



interface Order {
  orderId: string,
  productId: number,
  price: number,
}


export default function Index() {

  const [order, setOrder] = useState<Order>();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: "Order",
    });
    const params = Taro.getCurrentInstance().router?.params;
    if (params) {
      fetchOrder(params.orderId);
    }
  }, [])


  const fetchOrder = async (orderId) => {
    setLoading(true);
    const res = await Taro.request({
      url: orderDetailUrl + "/" + orderId,
      method: 'GET',
      header: {
        'Content-Type': 'application/json'
      }
    })
    setOrder(res.data.info as Order);
    setLoading(false);
  }

  const goIndex = () => {
    Taro.redirectTo({
      url: `/pages/index/index`
    })
  }


  return (
    <View>
      <View>
        订单页面
      </View>
      {
        loading ? "加载中" : (
          <View className="product">
          <View className="product-item">
            <Text >订单编号：{order?.orderId}</Text>
            <Text >商品价格：{order?.price.toFixed(2)}</Text>
            <View>
              <Button onClick={() => goIndex()}>
                返回首页
              </Button>
            </View>
          </View>
          </View>
        )
      }
    </View>
  )
}
